<template>
  <div class="bottomNav">
    <ul>
      <li
        v-for="(item, index) in arr"
        :class="props.choossIndex == index ? 'selection1' : 'selection'"
        :key="index"
      >
        <router-link :to="{ path: item.path }">
          <div class="item">
            <div>
              <img
                :src="props.choossIndex == index ? item.url2 : item.url1"
                alt=""
              />
            </div>
            <span>{{ item.name }}</span>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { defineProps, defineEmits } from "vue";
import { useStore } from "vuex";
import { Toast } from "vant";

import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const goback = () => {
  router.back();
  store.commit("changeRouterType", "back");
};
const store = useStore();
let props = defineProps({
  choossIndex: {
    type: Number,
    required: true,
    default: 0,
  },
});

let arr = reactive([
  {
    path: "/",
    name: "首页",
    url1: require("../assets/login/damo-shangcheng.png"),
    url2: require("../assets/login/damo-shangcheng1.png"),
  },
  {
    path: "/goodCard",
    name: "购物车",
    url1: require("../assets/login/damo-goods.png"),
    url2: require("../assets/login/damo-goods1.png"),
  },
  {
    path: "/order",
    name: "订单",
    url1: require("../assets/login/damo-dingdan.png"),
    url2: require("../assets/login/damo-dingdan1.png"),
  },
  {
    path: "/my",
    name: "用户",
    url1: require("../assets/login/damo-yonghu.png"),
    url2: require("../assets/login/damo-yonghu1.png"),
  },
]);
let choossIndex = ref(null);
let jump = (index) => {
  choossIndex.value = index;
};
let tab = document.querySelector(".bottomNav");
let winh = document.body.clientHeight; // 取窗口可视范围的高度
window.addEventListener("resize", () => {
  if (document.body.clientHeight < winh) {
    tab.style.display = "none"; //隐藏按钮
  } else {
    tab.style.display = "block"; //显示按钮
  }
});
</script>

<style lang="scss" scoped>
.bottomNav {
  width: 100%;
z-index: 99;
  position: fixed;
  bottom: 0;
  background-color: white;
  ul {
    display: flex;
    justify-content: space-around;
    height: 6.5vh;
    align-items: center;
    .selection {
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all 0.5s ease;
      .item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        div {
          width: 5vw;
          height: 5vw;
          img {
            width: 100%;
            height: 100%;
          }
        }
        span {
          font-size: 13px;
          color: black;
        }
      }
    }
    .selection1 {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #32a4e0;
      transform: scale(1.05, 1.05);
      transition: all 0.5s ease;
      .item {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        div {
          width: 5vw;
          height: 5vw;
          img {
            width: 100%;
            height: 100%;
          }
        }
        span {
          font-size: 13px;
          color: black;
        }
      }
    }
  }
}
</style>
